<template>
    <div id="app">
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb> -->
        <div class="banner">
            <div class="recommendPage">
                <swiper v-if="swiperList.length>1" :options="swiperOption" ref="mySwiper">
                    <swiper-slide v-for="(item,index) in swiperList" :key="index">
                    <!-- <p>{{item.text}}</p> -->
                    <img :src="item.imgUrl">
                    </swiper-slide>
                <!-- 滚动条 -->
                <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
                <!-- 标页码 -->
                <div class="swiper-pagination" slot="pagination"></div>
                <!-- 上一页 -->
                <div class="swiper-button-prev" slot="button-prev"></div>
                <!-- 下一页 -->
                <div class="swiper-button-next" slot="button-next"></div> 
                </swiper>
            </div>
        </div>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import axios from 'axios';
export default {
    name: 'VueProject01Swiper',
    props:['swiperList'],
    components: {
        swiper,
        swiperSlide,
    },

    data() {
        return {
                swiperOption: {
                loop: true,
                autoplay: {
                delay: 1000, //自动切换的时间间隔，单位ms
                disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay
                },
                // 显示分页
                pagination: {
                el: ".swiper-pagination",
                clickable: true, //允许分页点击跳转
                },
                // 设置点击箭头
                navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
                },
            }

        };
    },

    mounted() {
        
    },
    methods: {
        
    },
};
</script>

<style  lang="scss">
    #app{
        width: 100%;
        height: 500px;
        background: rgb(245, 245, 245);
    }
    .banner{
        width: 1240px;
        height: 500px;
        margin: 0 auto;
        background: url('http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/dfc11bb0-4af5-4e9b-9458-99f615cc685a.jpg');
    }
    .recommendPage{
        height: 100%;
    }
    .swiper-pagination-bullet{
        width: 12px !important;
        height: 12px !important;
    }
    .swiper-pagination-bullet-active{
        background: #ffffff !important;
    }
</style>